{% if __SELF__.slideshow.slides %}
    <div id='slideshow' class='carousel slide' data-ride='carousel' data-interval='3500'>
        <div class='carousel-content'>
            <div class='carousel-inner' role='listbox'>
                {% for i, slide in __SELF__.slideshow.slides %}
                    <div class='item{% if loop.first %} active{% endif %}'>
                        <img class='img-responsive' src='{{ slide.image.path }}' alt='{{ slide.image.title }}'>
                        {% if slide.name or slide.description %}
                            <div class='carousel-caption clearfix'>
                                {% if slide.title %}<h4 class='carousel-caption-title'>{{ slide.title }}</h4>{% endif %}
                                {% if slide.description %}<p>{{ slide.description|raw }}</p>{% endif %}
                                {% if slide.link %}<a class='carousel-caption-link' href='{{ slide.link }}' target='_blank'>Learn more</a>{% endif %}
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
            <a class='left carousel-control' href='#slideshow' role='button' data-slide='prev'>
                <span class='icon icon-angle-left' aria-hidden='true'></span>
                <span class='sr-only'>Previous</span>
            </a>
            <a class='right carousel-control' href='#slideshow' role='button' data-slide='next'>
                <span class='icon icon-angle-right' aria-hidden='true'></span>
                <span class='sr-only'>Next</span>
            </a>
        </div>

        <ol class='carousel-indicators'>
            {% for i, slide in __SELF__.slideshow.slides %}
                <li data-target='#slideshow' data-slide-to='{{ loop.index - 1 }}'{% if loop.first %} class='active'{% endif %}></li>
            {% endfor %}
        </ol>
    </div>
{% endif %}
